<template>
  <div class="practitioners-action flex flex-column">
    <antd-form :options="formOptions" @submit="(value) => formData == value" style="margin: 10px" class="flex-fixed" />
    <common-table :api="getDataAsync" :api-params="paramsData" :columns="columns" class="flex-auto-height">
      <template #index="{ text, scope, index }">{{ index + 1 }}</template>
      <template #avatar="{ text, scope }">
        <avatar style="width: 50px; padding: 3px" :src="scope.head_img_url" />
      </template>
    </common-table>
  </div>
</template>

<script>
import { homestayWarningEmployee } from '@gis/lib/api';
import CommonTable from '@gis/lib/components/antd-table/index.vue';
import Avatar from '@gis/lib/components/img-viewer/avatar-card.vue';
export default {
  name: 'practitioners-action',
  components: { Avatar, CommonTable },
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      formOptions: [
        {
          component: 'a-input',
          label: '姓名',
          field: 'employee_name',
        },
      ],
      formData: {
        employee_name: '',
      },
      columns: [
        {
          title: '头像',
          scopedSlots: { customRender: 'avatar' },
          align: 'left',
        },
        {
          title: '姓名',
          dataIndex: 'employee_name',
          ellipsis: true,
        },
        {
          title: '职务',
          dataIndex: 'employee_position',
          ellipsis: true,
        },
        {
          title: '联系电话',
          dataIndex: 'employee_phone',
          ellipsis: true,
        },
      ],
    };
  },
  computed: {
    paramsData() {
      return Object.assign({}, { hotel_id: this.details.hotel_id }, this.formData);
    },
  },
  methods: {
    async getDataAsync(params) {
      if (!params.hotel_id) return;
      const { data = {} } = await homestayWarningEmployee(params);
      return {
        data: data.list,
        total: data.count,
      };
    },
  },
};
</script>

<style scoped lang="less">
.practitioners-action {
  width: 100%;
  height: 100%;
  //background: pink;
}
</style>
